import React, { useState } from 'react';
import {
    Layout,
    Menu,
    Breadcrumb,
    Table,
    Button,
    Input,
    Dropdown,
    Tree,
    Modal,
    Form,
    Upload,
    message,
    Tag,
    Space,
    Popconfirm
} from 'antd';
import {
    FolderOutlined,
    FileOutlined,
    DeleteOutlined,
    EditOutlined,
    DownloadOutlined,
    SearchOutlined,
    PlusOutlined,
    UploadOutlined
} from '@ant-design/icons';
import './index.less';

interface DocumentItem {
    key: string;
    name: string;
    type: 'file' | 'folder';
    size?: string;
    modified: string;
    tags?: string[];
}

const DocumentManagement: React.FC = () => {
    const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
    const [searchText, setSearchText] = useState('');
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentDir, setCurrentDir] = useState('我的文档');
    const [folderTree, setFolderTree] = useState([
        {
            title: '我的文档',
            key: 'root',
            children: [
                { title: '图片', key: 'images', isLeaf: true },
                { title: '文档', key: 'docs', isLeaf: true }
            ]
        }
    ]);

    // 模拟文档数据
    const [documents, setDocuments] = useState<DocumentItem[]>([
        {
            key: '1',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '2',
            name: '产品设计稿',
            type: 'folder',
            size: '2.5 MB',
            modified: '2024-03-14',
            tags: ['项目']
        },
        {
            key: '3',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '4',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '5',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '6',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '7',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '8',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '9',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
        {
            key: '10',
            name: '项目报告.pdf',
            type: 'file',
            size: '2.5 MB',
            modified: '2024-03-15',
            tags: ['重要', '项目']
        },
    ]);

    // 表格列配置
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            render: (text: string, record: DocumentItem) => (
                <Space>
                    {record.type === 'folder' ? <FolderOutlined /> : <FileOutlined />}
                    {text}
                </Space>
            )
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            render: (type: string) => type.toUpperCase()
        },
        {
            title: '大小',
            dataIndex: 'size',
            key: 'size'
        },
        {
            title: '修改时间',
            dataIndex: 'modified',
            key: 'modified',
            sorter: (a: DocumentItem, b: DocumentItem) =>
                new Date(a.modified).getTime() - new Date(b.modified).getTime()
        },
        {
            title: '标签',
            dataIndex: 'tags',
            key: 'tags',
            render: (tags: string[]) => (
                <>
                    {tags ?.map(tag => (
                        <Tag color="blue" key={tag}>
                            {tag}
                        </Tag>
                    ))}
                </>
            )
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: { key: string; }) => (
                <div className="action-buttons">
                    <Button
                        size="small"
                        type="link"
                        icon={<EditOutlined />}
                    // onClick={() => showModal('view', record)}
                    >
                    </Button>
                    <Button
                        size="small"
                        type="link"
                        icon={<DownloadOutlined />}
                    // onClick={() => showModal('edit', record)}
                    >
                    </Button>
                    <Popconfirm
                        title="确定删除该知识库吗？"
                    // onConfirm={() => handleDelete(record.key)}
                    >
                        <Button size="small" type="link" danger icon={<DeleteOutlined />}>
                        </Button>
                    </Popconfirm>
                </div>
            )
        }
    ];

    // 上传配置
    const uploadProps = {
        action: 'https://your-api-endpoint/upload',
        beforeUpload: (file: File) => {
            const isLt100M = file.size / 1024 / 1024 < 100;
            if (!isLt100M) {
                message.error('文件大小不能超过100MB');
            }
            return isLt100M;
        }
    };

    // 处理搜索
    const filteredDocuments = documents.filter(doc =>
        doc.name.toLowerCase().includes(searchText.toLowerCase())
    );

    return (
        <div className="documentManagement">
            <div className="dataSource">
                <h2>文档管理</h2>
                {/* 顶部操作栏 */}
                <div>
                    <Input.Search
                        placeholder="搜索文档..."
                        prefix={<SearchOutlined />}
                        style={{ width: 300, marginRight: 16 }}
                        onChange={(e: { target: { value: React.SetStateAction<string>; }; }) => setSearchText(e.target.value)}
                    />

                    <Space style={{ float: 'right' }}>
                        <Button
                            type="primary"
                            icon={<PlusOutlined />}
                            onClick={() => setIsModalVisible(true)}
                        >
                            新建
                            </Button>
                        <Upload {...uploadProps}>
                            <Button icon={<UploadOutlined />}>上传文件</Button>
                        </Upload>
                    </Space>
                </div>

                {/* 主要内容区域 */}
                <div style={{ margin: '20px 0' }}>
                    <Table
                        dataSource={filteredDocuments}
                        columns={columns}
                        rowClassName={() => 'document-row'}
                        pagination={{ pageSize: 50 }}
                        scroll={{ y: 600 }}
                    />
                </div>

                {/* 新建对话框 */}
                <Modal
                    title="新建"
                    visible={isModalVisible}
                    onCancel={() => setIsModalVisible(false)}
                    footer={null}
                >
                    <Form layout="vertical">
                        <Form.Item label="类型" name="type">
                            <Space>
                                <Button icon={<FolderOutlined />}>新建文件夹</Button>
                                <Button icon={<FileOutlined />}>新建文档</Button>
                            </Space>
                        </Form.Item>
                        <Form.Item label="名称" name="name" rules={[{ required: true }]}>
                            <Input placeholder="请输入名称" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                创建
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>

    );
};

export default DocumentManagement;